<template>
  <div class="left">
      <div class="login-wrap">
               <img src="../../assets/loginicon.png">
               <el-form :model="ruleForm" :rules="rules" ref="ruleForm" >
                 <el-form-item prop="name">
                    <el-input v-model="ruleForm.name" placeholder="请输入账号" clearable></el-input>
                 </el-form-item>
                 <el-form-item prop="password">
                    <el-input type="password" v-model="ruleForm.password" placeholder="请输入密码" clearable></el-input>
                 </el-form-item>
               </el-form>
              <el-button type="primary" @click ="login">登录</el-button>
            <!--   <el-input v-model="password"></el-input> -->
            <!--  <input class="name" name="" id="accountName" type="text" placeholder="请输入账号" v-model="name">
              <input class="code" name="password" id="password" type="password" placeholder="请输入密码" v-model="password"> -->

      </div>
  </div>
</template>

<script>
  export default {
    name:'Login',
    data () {
  return{
    ruleForm:{
      name:'',
      password:''
    },
    rules:{
      name:[{required: true, message: '请输入账号', trigger: 'blur'}],
      password:[{required: true, message: '请输入密码', trigger: 'blur'}]
    }

  }

    },
    methods:{
      login(){
        var _this=this
          const ip = localStorage.getItem('Ip')
                this.$refs.ruleForm.validate((valid) => {
                  if(valid){
                    this.$axios.post('/api/admin/login', {
                        adminName: this.ruleForm.name,
                        password: this.ruleForm.password,
                        lastLoginIp:ip
                      },)  .then(function (response) {
                    if(response.data.code==0){
                       _this.$cookies.set('adminName', _this.ruleForm.name)
                       _this.$cookies.set('token', response.data.data.token)
                       _this.$cookies.set('adminType',response.data.data.adminType)
                        _this.$router.push({ name:'Head'});
                    }else{
                      if(response.data.code===3001){
                        _this.$alert('账号密码错误', '提示', {
                           confirmButtonText: '确定',
                           callback: action => {
                           }
                         });
                      }else{
                        _this.$alert('网络错误', '提示', {
                           confirmButtonText: '确定',
                           callback: action => {

                           }
                         });
                      }
                    }
                  })
                  .catch(function (error) {
                  });
}
})

      }
    }

  }
</script>

<style lang="scss" scoped>
  .left{
      width: 100%;
      height:100vh;
     background-image: url(../../assets/login.jpg);
     background-size: 100% 100%;
     background-repeat: no-repeat;
    img{
             width: 52%;
             height: 26%;
             margin: auto;
             display: block;
    }
  }
  .login-wrap{
 width: 20%;
     height: 36vh;
     position: fixed;
     top: 19%;
     left: 40%;
     background-color: #fff;
     border-radius: 5px;
     padding: 4% 0 1% 0;
     text-align: center;
    .el-form-item{
      width: 80%;
      margin:11px auto;
      .el-input{width: 100%;}
    }
.el-button{
  width: 60%;
  margin: 20px 0;
}
  }





</style>
